<template>
  <div class="main">
    <el-container>
      <el-container>
        <!-- 主体部分 -->
        <el-main style="line-height:35px">
          <!-- 查询部分 -->
          <h2 style="line-height: 20px;width:100%;text-align:left;margin-bottom:20px">用户管理</h2>
          <el-card class="box-card">
            <div>
              <div class="clearfix" style="float:left;line-height:20px">
                <strong>用户查询</strong>
              </div>
              <div class="clear"></div>
              <el-divider></el-divider>
            </div>
            <div>
              <div class="clear"></div>
              <div style="float:left;line-height:50px;margin-bottom:20px">
                <label style="margin-right:10px;font-size:18px">账号</label>
                <input v-model="message" type="text" style="height:30px;width:300px" />
                <el-button style="margin-left:20px" type="primary" plain @click="getMessage">查询</el-button>
              </div>
            </div>
          </el-card>

          <el-card class="box-card" style="margin-top:20px">
            <div>
              <div style="line-height:20px">
                <strong style="float:left">库存信息</strong>
              </div>
              <!-- 显示内容表单 -->
              <div class="clear"></div>
              <el-divider></el-divider>
            </div>
            <el-table :data="tableData" border style="width: 100%;height:100%" empty-text="暂无数据">
              <el-table-column fixed prop="userNo" width="200" height="30" v-if="false"></el-table-column>
              <el-table-column fixed prop="gonghao" label="账号" width="200" height="30"></el-table-column>
              <el-table-column fixed prop="actor.actor_name" label="身份" height="30"></el-table-column>
              <el-table-column fixed prop="userName" label="姓名" height="30"></el-table-column>
              <el-table-column fixed prop="sex" label="性别" height="30"></el-table-column>
              <el-table-column fixed prop="phone" label="手机号" height="30"></el-table-column>
              <el-table-column fixed prop="password" label="密码" height="30"></el-table-column>

              <el-table-column fixed="right" label="操作" width="200" height="30">
                <template slot-scope="scope">
                  <el-button type="text" @click="open(scope.row)" size="small">删除</el-button>
                  <!-- @click="editor(scope.$index, scope.row)" -->
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="block" style="margin-top:30px">
              <el-pagination
                style="margin:0px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */

export default {
  name: "productManage",
  data() {
    return {
      tableData: [],
      message: "",
      addDialogFormVisible: false,
      editorDialogFormVisible: false,
      addForm: {
        name: "",
        note: ""
      },
      editorForm: {
        id: 0,
        name: "",
        note: ""
      },
      formLabelWidth: "120px",
      currentPage: 1,
      total: 0,
      pageSize: 5
    };
  },
  created() {
    this.rendering();
  },
  methods: {
    rendering() {
      this.$axios({
        url: "/User/showList",
        methods: "get",
        headers: { "content-type": "application/json" },
        params: { pageNum: this.currentPage, pageSize: this.pageSize }
      }).then(res => {
        // console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.pageSize = res.data.pageSize;
        this.currentPage = res.data.pageNum;
        // console.log(this.total);
      });
    },
    getMessage() {
      console.log(this.message);
      this.$axios({
        url: "/User/searchUser",
        methods: "get",
        headers: { "content-type": "application/json" },
        params: {
          gonghao: this.message
        }
      }).then(res => {
        console.log(res.data);
        let arr = [];
        arr.push(res.data);
        this.tableData = arr;
      });
    },
    open(row) {
      // console.log(row);
      this.$confirm("您确定要删除嘛？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(row.userNo);
          this.$axios({
            url: "/User/deleteUser",
            method: "get",
            params: { iduser: row.userNo }
          }).then(res => {
            // console.log(res.data);
            this.rendering();
            this.$message({
              type: "info",
              message: res.data.msg
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.rendering();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.rendering();
    }
  }
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 600px;
  height: 600px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 1150px;
}

.clear {
  clear: both;
}
</style>